<template>
    <div class="content" :style="contentStyle">
    <div class="bgOpacity"></div>
<!--        给意象取名-->
        <div class="page1" :style="changePageStyle">
            <div class="article">
                <img :src="articleMatched[0].imageUrl" alt="">
            </div>
            <div class="name">{{articleMatched[0].name}}</div>
        </div>
        <div class="page2" v-if="isChange">
            <v-touch class="article-options"  :class="article.isLos ? 'los' : '' "
                 v-for="(article,index) in item.articles" :key="index"
                :style="articleMatchedStyle(article,index)"
                @tap="articleTouch(article,$event)">
                <div class="article-img" :class="article.isTouch ? 'suc' : ''">
                    <img :src="article.imageUrl" alt="">
                </div>
                <div class="article-name" v-if="article === articleMatched[0] && isFinished">{{article.name}}</div>
<!--                <Point :style="pointStyle" v-if="!operated"/>-->
            </v-touch>
        </div>
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    // import Point from "../point.vue"
    export default {
        mixins: [mixins],
        data(){
            const articleMatched = this.item.articles.filter(item=>{return item.isMatched})   //过滤被选中命名的意象或角色
            return{
                articleIndex: 0,
                isChange: false,
                isFinished: false,
                operated: false,
                articleMatched,     //随机被命名的意象或角色
            }
        },
        // components:{
        //     Point
        // },
        beforeMount() {
            if(!this.item.isFinish){
                this.onEnter()
                this.item.articles.forEach(item => {
                    this.$set(item,'isTouchMatched',true)                   //用于用户操作正确后隐藏错误答案
                })
            } else {
                this.isChange = false
                this.isFinished = true
                return
            }
        },
        computed:{
            pointStyle(){
                return{
                    maxWidth: '60%',
                    marginTop: '-5rem',
                    marginLeft: '-1.5rem',
                    transform: 'rotate(180deg)'
                }
            },
            changePageStyle(){
                return{
                    display: this.isChange ? 'none' : 'block'
                }
            },
            articleMatchedStyle(article,index){
                return function (article,index) {
                    const moveX = 7.6 - index * 7.6
                    return{
                        left: index * 10 + 'rem',
                        display: article.isTouchMatched ? 'block' : 'none',
                        transform: article.isTouch ? 'scale(1.3) translateX(' + moveX + 'rem)' : '',
                        transition: 'all 1s'
                    }
                }
            }
        },
        methods:{
            onEnter:function () {
                clearTimeout(timer)
               const timer = setTimeout(()=>{
                   this.isChange = true
                   this.updateOperated({questionIndex:this.questionIndex,param:this.index})
               },6000)
            },
            articleTouch: function(article,event) {
                if (this.item.isFinish || article.isLos || article.isTouch) {
                    return
                }
                this.touchMusic()
                this.operated = true
                this.updateOperated({questionIndex:this.questionIndex,param:this.index})
                if(article === this.articleMatched[0]){
                    this.$set(article, "isTouch", true)
                    this.item.articles.forEach(item => {
                        if(item !== article) this.$set(item,'isTouchMatched',false)
                    })
                    this.isFinished = true
                    if(this.isSeedEntery){
                        this.setSucLottiePlay()
                        setTimeout(()=>{this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})},3000)
                    }else {
                        setTimeout(()=>{this.perfectMusic()
                            this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                        },2000)
                    }
                    this.addAnswer({
                        id: this.item.id,
                        type: true
                    })
                } else {
                    this.losMusic()
                    this.$set(article, "isLos", true)
                    setTimeout(() => {
                        this.$set(article, "isLos", false)
                    }, 1000)
                    if(this.isSeedEntery){
                        setTimeout(()=>{this.$emit('nextAssignment')},600)
                    } else {
                        setTimeout(()=>{this.$emit("losShow")},1000)
                    }
                    this.addAnswer({
                        id: this.item.id,
                        type: false
                    })
                }
            }
        },
        watch: {
            activeIndex: function (activeIndex) {
                if (this.index === activeIndex && !this.item.isFinish) {
                    this.onEnter()
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
@import '../../../common/stylus/content.styl'
.bgOpacity
    $coord('WHLT',100%,100%,0,0)
    background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png')0 0/100% 100%
.page1
    position absolute
    $center('WHLT',8rem,8rem)
    background url($urlTitle + 'assignment/image/page15/答题选项背景.png')0 0/100% 100%
    opacity 0
    animation loading-in .5s
    animation-fill-mode forwards
    .article
        position absolute
        $center('WHLT',6rem,6rem)
        display flex
        align-items center
        justify-content center
        img
            min-width 60%
            max-width 80%
            max-height 100%
            filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
    .name
        position absolute
        $center('WHLT',7rem,2rem)
        margin-top 5rem
        background url($urlTitle + 'assignment/image/page15/答题文字背景.png')0 0/100% 100%
        font-size 1.2rem
        letter-spacing 0.5rem
        color white
        line-height 2rem
        text-align center
        opacity 0
        animation loading-in 1s
        animation-delay 3s
        animation-fill-mode forwards
.page2
    position absolute
    $center('WHLT',28rem,8rem)
    opacity 0
    animation loading-in 1s
    animation-fill-mode forwards
    .article-options
        position absolute
        width 8rem
        height 8rem
        background url($urlTitle + 'assignment/image/page15/答题选项背景.png')0 0/100% 100%
        .article-img
            position absolute
            $center('WHLT',6rem,6rem)
            display flex
            align-items center
            justify-content center
            img
                min-width 60%
                max-width 80%
                max-height 100%
                filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
        .article-name
            position absolute
            $center('WHLT',7rem,2rem)
            margin-top 5rem
            background url($urlTitle + 'assignment/image/page15/答题文字背景.png')0 0/100% 100%
            font-size 1.2rem
            letter-spacing 0.5rem
            color white
            line-height 2rem
            text-align center
            opacity 0
            animation loading-in 1s
            animation-delay 1s
            animation-fill-mode forwards
</style>
